import { useUserStore, useConsultStore } from '@/stores'
import { createRouter, createWebHistory } from 'vue-router'
// 进度条 组件 与 样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// createRouter创建路由实例, -> new VueRouter()
// history 是路由模式,hash模式,history模式
// createWebHistory()是开启history模块 http://xxx/user
// createWabHashHistory() 是开启hash模块 http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址,默认是'/'
// https://vitejs.dev/guide/build.html#public-base-path
// 如果将来你部署的域名路径是: http://xxx/my-path/user
// vite.config.ts 添加配置 base:my-path,路由这就会加上 my-path 前缀了
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'login',
      meta: { title: '登录' },
      component: () => import('@/views/Login/index.vue')
    },

    {
      path: '/',
      name: 'layout',
      redirect: '/home',
      component: () => import('@/views/Layout/index.vue'),
      children: [
        {
          path: '/home',
          name: 'home',
          meta: { title: '首页' },
          component: () => import('@/views/Home/index.vue')
        },
        {
          path: '/article',
          name: 'article',
          meta: { title: '健康百科' },
          component: () => import('@/views/Article/index.vue')
        },
        {
          path: '/notify',
          name: 'notify',
          meta: { title: '消息通知' },
          component: () => import('@/views/Notify/index.vue')
        },
        {
          path: '/user',
          name: 'user',
          meta: { title: '个人中心' },
          component: () => import('@/views/User/index.vue')
        }
      ]
    },
    {
      path: '/user/patient',
      name: 'patient',
      component: () => import('@/views/User/PatientPage.vue'),
      meta: { title: '家庭档案' }
    },
    {
      path: '/consult/fast',
      name: 'fast',
      component: () => import('@/views/Consult/ConsultFast.vue'),
      meta: { title: '极速问诊' }
    },
    {
      path: '/consult/dep',
      name: 'dep',
      component: () => import('@/views/Consult/ConsultDep.vue'),
      meta: { title: '选择科室' }
    },
    {
      path: '/consult/illness',
      name: 'illness',
      component: () => import('@/views/Consult/ConsultIllness.vue'),
      meta: { title: '病情描述' }
    },
    {
      path: '/consult/pay',
      name: 'pay',
      component: () => import('@/views/Consult/ConsultPay.vue'),
      meta: { title: '问诊支付' }
    },
    {
      path: '/room',
      name: 'room',
      component: () => import('@/views/Room/index.vue'),
      meta: { title: '问诊室' },
      beforeEnter(to) {
        // reject the navigation
        console.log(to.query)
        if (to.query.payResult && to.query.payResult === 'false') {
          return '/user/consult'
        }
        return true
      }
    },
    {
      path: '/user/consult',
      component: () => import('@/views/User/ConsultPage.vue'),
      meta: { title: '问诊记录' }
    },
    {
      path: '/user/consult/:id',
      component: () => import('@/views/User/ConsultDetail.vue'),
      meta: { title: '问诊详情' }
    },
    {
      path: '/order/pay',
      component: () => import('@/views/Order/OrderPay.vue'),
      meta: { title: '药品支付' }
    },
    {
      path: '/order/pay/result',
      component: () => import('@/views/Order/OrderPayResult.vue'),
      meta: { title: '药品支付结果' }
    },
    {
      path: '/order/:id',
      component: () => import('@/views/Order/OrderDetail.vue'),
      meta: { title: '药品订单详情' }
    },
    {
      path: '/order/logistics/:id',
      component: () => import('@/views/Order/OrderLogistics.vue'),
      meta: { title: '物流详情' }
    },
    {
      path: '/login/callback',
      component: () => import('@/views/Login/LoginCallback.vue'),
      meta: { title: 'QQ登录-绑定手机' }
    }
  ]
})

// 路由 导航前置守卫
// 要求:拦截没有token 且 不再白名单的页面,
// 有三种情况:
// 1.有token,且 访问 非白名单的页面,如 user => 不拦截
// 2.有token,且 访问 白名单的页面,如 login,register => 去 home
// 3.没有token 或 token超时/错误,且 访问 白名单的页面,如 login,register => 去 login
router.beforeEach((to) => {
  // 实现加载进度显示
  NProgress.start()
  // vue3 有两个参数,to from,支持三个参数
  // 放行: return true
  // 放行到某个页面: return '目标地址'
  const store = useUserStore() // pinia用户信息
  const whiteList = ['/login', '/login/callback'] // 页面白名单
  const clearConsultationRecord = ['/user/consult', '/room'] // 清除 问诊记录
  // 问诊室 和 问诊记录 都需要清除问诊记录
  if (clearConsultationRecord.includes(to.path)) {
    const consultStore = useConsultStore()
    consultStore.clear()
  }
  if (
    // 检测用户是否登录(token状态)
    !store.user?.token &&
    // 避免无限重定向  to.path !== 'Login'
    !whiteList.includes(to.path)
  ) {
    // 将用户重定向到登录页面
    return '/login'
  }

  return true
})
router.afterEach((to) => {
  // 设置 页面标题 document.title 获取页面标题
  document.title = `优医问诊-${to.meta.title}` || ''
  NProgress.done()
})
NProgress.configure({
  // 不显示 转圈圈图标
  showSpinner: false
})

export default router
